<template>
	<div>
		<div style="margin-top: 10px;">
			<n-form ref="formRef" label-placement="top" label-width="120" require-mark-placement="right-hanging">
				<!-- 弹窗外的元素 -->
				<template v-for="field in out">
					<AISettingField :field="field" v-model="model" :maxTokensMax="maxTokensMax"
						 />
				</template>

				<div v-if="inner.length>0" class="more_btn fx fx-c_center" @click="showAISetting=!showAISetting">高级设置
					<jb-icon :local="true" :icon="Icons.SETTING" class="ml-8" color="gray" width="16"></jb-icon>
				</div>
			</n-form>
		</div>
		<div>
			<!--弹窗设置-->
			<div v-if="showAISetting" @mousedown.stop
				style="display:flex;flex-direction:column;position: absolute;bottom: 0px;right: -370px;width: 360px;background-color:#FFF;border-radius: 16px;box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.1);padding: 18px 16px">
				<div
					style="width: 100%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;padding: 10px">
					<span style="font-size: 18px">高级设置</span>
					<div style="cursor: pointer" @click="showAISetting=false">
						<jb-icon :local="true" icon="iconamoon:close-bold" style="font-size: 20px;color: #333"></jb-icon>
					</div>

				</div>

				<n-form style="margin-top: 24px" ref="formRef" label-placement="top" label-width="120"
					require-mark-placement="right-hanging">
					<!-- 弹窗内的元素 -->
					<template v-for="field in inner">
						<AISettingField :field="field" v-model="model" :maxTokensMax="maxTokensMax"
							 />
					</template>


				</n-form>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
    ref, watch
} from 'vue';
	import AISettingField from './AISettingField.vue';
	import {
		Icons
	} from "../../../../../../constants/index.js";

	const props = defineProps({
		inner: {
			type: Array,
			required: true
		},
		out: {
			type: Array,
			required: true
		}
	});
	// console.log("子组件", props)

	const showAISetting = ref(false)
	const maxTokensMax = 8192;

    const model = defineModel();


</script>

<style scoped>
	/* 可以在这里添加组件特定的样式 */
	.more_btn {
		background: #f9fafb;
		padding: 8px;
		cursor: pointer;
		border-radius: 6px;
	}

	label {
		margin-bottom: 8px;
	}

	label:not(:first-child) {
		margin-top: 16px;
	}
</style>